<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<div class="layuimini-container">
    <div class="layuimini-main">

        <fieldset class="table-search-fieldset">
            <legend>搜索信息</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form layui-form-pane" action="">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">选择院系：</label>
                            <div class="layui-input-inline">
                                <select id="collegeSearch" name="collegeSearch" lay-filter="collegeSearch">
                                    <option value="">请选择</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button type="button" id="searchBtn" class="layui-btn layui-btn-primary"
                                    lay-submit lay-filter="searchBtn"><i class="layui-icon"></i> 搜 索
                            </button>
                            <button type="reset" id="resetBtn" class="layui-btn layui-btn-primary"
                                    lay-filter="resetBtn"><i class="layui-icon"></i> 重 置
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </fieldset>

        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 添加院系</button>
                <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="removeBatch"> 批量删除
                </button>
            </div>
        </script>

        <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>

        <script type="text/html" id="currentTableBar">
            <a class="layui-btn layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="remove">删除</a>
        </script>


    </div>
</div>
<script>
    layui.use(['form', 'table','miniPage','element'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            layer = layui.layer,
            miniPage = layui.miniPage;

        function formInit(){
            let url = 'CollegeServlet';
            let params = {method:'search'};
            let successFn = function (res) {
                res = JSON.parse(res);
                let json =res;
                for (let i=0;i<json.data.length;i++) {
                    $('#collegeSearch').append("<option value='"+json.data[i].id+"'>"+json.data[i].name+"</option>");
                }

                //页面加载时，把院系的数据查询出来，并赋值给下拉框
                form.render('select');
            }
            $.get(url, params, successFn);
        }

        formInit();


        form.render();

        let tableObj = table.render({
            elem: '#currentTableId',
            url: 'MajorServlet?method=search',
            toolbar: '#toolbarDemo',
            defaultToolbar: ['filter', 'exports', 'print', {
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            cols: [[
                {type: "checkbox", width: 80},
                {field: 'name', width: 280, title: '专业名称', sort: true},
                {field: 'code', width: 180, title: '专业代号',sort:true},
                {field: 'college', width: 280, title: '院系', sort: true, templet:'<div>{{d.college.name}}<div>'},
                {title: '操作', minWidth: 150, toolbar: '#currentTableBar', align: "center"}

            ]],
            limits: [10, 15, 20, 25, 50, 100],
            limit: 10,
            page: true,
            skin: 'line'
        });

/*        /!*模板二*!/
        function collegeFn(row){
            return row.college.name
        }*/



        /**
         * toolbar监听事件
         */
        table.on('toolbar(currentTableFilter)', function (obj) {
            if (obj.event === 'add') {  // 监听添加操作

                var content = miniPage.getHrefContent('page/college/majorAdd.jsp');
                var openWH = miniPage.getOpenWidthHeight();

                var index = layer.open({
                    title: '添加专业',
                    type: 1,
                    shade: 0.2,
                    maxmin: true,
                    shadeClose: true,
                    area: [openWH[0] + 'px', openWH[1] + 'px'],
                    offset: [openWH[2] + 'px', openWH[3] + 'px'],
                    content: content,
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
            } else if (obj.event === 'removeBatch') {  // 监听删除操作
                var checkStatus = table.checkStatus('currentTableId')
                    , data = checkStatus.data;
               layer.confirm("确认删除这些信息吗？",function (index) {
                   $.ajaxSettings.async=false;
                   let successNumber = 0;
                   let failNumber = 0;
                   for (let i = 0; i < data.length; i++) {
                       let url = 'MajorServlet';
                       let params = {method:'remove', id: data[i].id};
                       let fn = function (res) {
                           if (res == 'true') {
                               successNumber++;
                           }else{
                               failNumber++;
                           }
                       }
                       $.post(url, params, fn);
                   }
                   $.ajaxSettings.async=true;
                   table.reload('currentTableId');
                   layer.msg("[" + successNumber + "]条信息删除成功  /  ["+failNumber+"]条信息删除失败");
                   layer.close(index);
               })
            }
        });

        //监听表格复选框选择
        table.on('checkbox(currentTableFilter)', function (obj) {
            console.log(obj)
        });

        table.on('tool(currentTableFilter)', function (obj) {
            var data = obj.data;
            if (obj.event === 'edit') {

                let id = data.id;
                let url = 'MajorServlet';
                let params = {method:'searchById',id:id};
                let name,code,college;
                let successFn = function (res) {
                    res = JSON.parse(res);
                    name = res.name;
                    code = res.code;
                    college = res.college.id;

                    var content =
                        miniPage.getHrefContent('page/college/majorModify.jsp?id='+id+'&name='+name+'&code='+code+'&college='+college);
                    var openWH = miniPage.getOpenWidthHeight();

                    var index = layer.open({
                        title: '编辑专业',
                        type: 1,
                        shade: 0.2,
                        maxmin: true,
                        shadeClose: true,
                        area: [openWH[0] + 'px', openWH[1] + 'px'],
                        offset: [openWH[2] + 'px', openWH[3] + 'px'],
                        content: content,
                    });
                    $(window).on("resize", function () {
                        layer.full(index);
                    });
                    return false;
                };

                $.ajaxSettings.async=false;
                $.get(url,params,successFn);
                $.ajaxSettings.async=true;

            } else if (obj.event === 'remove') {
                layer.confirm('真的删除行么', function (index) {
                    let url = 'MajorServlet';
                    let params = {method: 'remove',id:data.id};
                    let fn = function (res) {
                        if (res == 'true') {
                            obj.del();
                            layer.msg('删除成功',{icon: 1});
                        }else{
                            layer.msg('删除失败',{icon: 2});
                        }
                    };
                    $.post(url, params, fn);
                    layer.close(index);
                });
            }
        });


        // 监听搜索操作
        form.on('submit(searchBtn)', function (data) {
            let params = {
                page:{curr:1,limit:10},
                where:data.field
            }
            tableObj.reload(params);
            return false;
        });

        //当点击重置按钮时，重置搜索条件（按钮自带），也重置表格
        $('#resetBtn').click(function () {
            let params = {
                page:{curr:1,limit:10},
                where:null
            }
            tableObj.reload(params);
        })

    });
</script>

</body>
</html>